<template>
  <el-dialog
    ref="dialog"
    v-model="show"
    :append-to-body="true"
    :draggable="draggable"
    :overflow="true"
    :show-close="false"
    :width="width"
    style="padding: 0"
    @close="dialog_close"
    :modal="modal"
  >
    <template #header>
      <div
        class="w-full bg-[rgb(21,127,204)] h-10 flex justify-between p-0 *:flex *:items-center font-bold text-white"
      >
        <div class="p-2">
          <slot name="header"></slot>
        </div>
        <div class="m-0 p-0">
          <div
            v-if="showClose"
            class="cursor-pointer w-8 h-full hover:bg-red-500 flex justify-center items-center p-0 m-0"
            @click="close"
          >
            X
          </div>
        </div>
      </div>
    </template>

    <template #default>
      <slot name="default"></slot>
    </template>

    <template #footer>
      <div class="w-full bg-gray-200 flex justify-end items-center p-2">
        <slot name="footer"></slot>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElDialog } from "element-plus";
import { ref, watch } from "vue";
const dialog = ref<InstanceType<typeof ElDialog>>();

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  // 模态框宽度（默认500px）
  width: {
    type: String,
    default: "500",
  },
  // 是否显示关闭按钮
  showClose: {
    type: Boolean,
    default: true,
  },
  // 是否可拖动
  draggable: {
    type: Boolean,
    default: false,
  },
  modal: {
    type: Boolean,
    default: true,
  },
});

const emits = defineEmits(["update:modelValue"]);

const close = () => {
  emits("update:modelValue", false);
};

const show = ref(props.modelValue);
watch(
  () => props.modelValue,
  () => {
    show.value = props.modelValue;
  }
);

const dialog_close = () => {
  emits("update:modelValue", false);
};
</script>
